<template>
	<view class="content">
		<scroll-view class="wrap" scroll-y='true' :scroll-top="scrollTop" @scroll="scroll" scroll-with-animation='true' 
		:lower-threshold = "30" @scrolltolower ="bottomLogin">
		<view class="box">
		<!-- 轮播图start -->
		<view class="text-area">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			  <swiper-item v-for = "(item,i) in bannerList" :key = 'i' >
			  <view class="swiper-item uni-bg-red" >
				  <image :src="item.image" @click = "golp(item.link)"></image>
			  </view>
			  </swiper-item>
			</swiper>
		</view>
		<!-- 轮播图end -->
		<!-- 推荐 -->
		<view class="tuijian">
			<view v-for="(tj,a) in tuijianList" :key = "a" class="all-tuijian" @click="cc(tj.link)">
				  
					<image :src="tj.image" class="tuijian-img" :herf ="tj.link"></image>
					<view>{{tj.title}}</view>
				
					
			</view>
		</view>
		<!-- 推荐end -->
		<!-- banner -->
		<view class="banner">
			<image src="https://s10.mogucdn.com/mlcdn/c45406/180917_18l981g6clk33fbl3833ja357aaa0_750x390.jpg"></image>
		</view>
		<!-- banner-end -->
		<!-- tab-start -->
		<view class="tab">
			<view class="tab-item" v-for="(tab,n) in tabtext" :key ="n"  :class="{'tab-border':(tabindex == n)}"  @click="cctab(n)">
				
			{{tab}}
			</view>
		</view>
		<!-- tab-end -->
		<!-- 列表 -->
		<view class="all-list">
			<view v-for="(item,index) in dataList" class="data-class" :key = "index"  :data-itemId ="item.iid" @click="gopage(item.iid)">
					<image :src="item.show.img"></image>
					<view class="listfont">{{item.title}}</view>
					<view class="list-view">
						<view class="newp">{{item.orgPrice}}</view>
						<image src=""></image>
						<view>{{item.sale}}</view>
					</view>
			</view>
		</view>
		<!-- 列表end -->
		<!-- 悬浮按钮 -->
		<view class="view-fab" v-show="dis" >
		         <image src="../../static/top.png" @click="backtop"  herf ="#"></image>
		</view>
		<!-- 悬浮按钮end -->
		</view>
		</scroll-view>
	</view>
</template>

<script>
	import {serverUrl} from '../../common/common.js'
	export default {
		data() {
			return {
				title: 'Hello',
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				bannerList:[],
				tuijianList:[],
				tabtext:['推荐','新款','流行'],
				tabindex:0,
				dataList:[],
				lodLIst:[],
				types:'pop',
				pages:1,
				scrollTop:0,
				dis:false
			}
		},
		async onLoad() {
			await uni.request({
			url: this.baseurl +"/home/multidata",
			method:"GET",
			success: (res) => {
			        console.log(res.data);
			        this.bannerList =res.data.data.banner.list;
					this.tuijianList =res.data.data.recommend.list
					 console.log(this.bannerList);
			    },
				}),
			this.getdata()
		},
		// 监听上拉加载
		onPullDownRefresh(){
			this.getdata()
			uni.stopPullDownRefresh();
		},
		onReachBottom(){
			
		},
		methods: {
			async getdata(){
				await uni.request({
				url: this.baseurl +"/home/data" +"?type="+this.types+"&page="+this.pages,
				method:"GET",
				success: (res) => {
				        
				        this.lodLIst.push(...res.data.data.list);
						this.dataList =this.lodLIst
						console.log(this.dataList);
				    },
					})
			},
			cc(url){
				uni.navigateTo({
				    url:"./inpages/tj?url="+url
				})
			},
			cctab(n){
				console.log(n);
				this.tabindex = n;
				if(n<1){
					this.types = "pop"
					this.lodLIst =[]
					this.getdata()
					return 
				}else if(n<2){
					this.types = "new"
					this.lodLIst =[]
					this.getdata()
					return 
				}else{
					this.types = "sell"
					this.lodLIst =[]
					this.getdata()
					return 
				}
			},
			// 滚动事件
			scroll(e){
				const top = e.detail.scrollTop
				if(top>700){
					this.dis = true
					return
				}else(
				this.dis = false
				)
			},
			bottomLogin(){
				this.pages++,
				console.log(this.pages)
				uni.showLoading({
					mask:true
				})
				this.getdata()
				uni.hideLoading()
			},
			//回到顶部
			backtop(){
				this.scrollTop=this.scrollTop+0.1
			},
			//跳转页面
			gopage(item){
				console.log(item)
				uni.navigateTo({
					url:"./inpages/indexpage?shopId="+item
				})
			},
			//点击轮播图
			golp(url){
				uni.navigateTo({
					url:"./inpages/lunbo?url="+url
				})
			}
			
		}
	}
</script>

<style>
	.wrap{
		height: 100vh;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
.text-area{
	width: 100% !important;
}

.swiper{
	width: 100%;
	height: 440upx;
	
}

.swiper-item image{
	width: 100%;
}
.tuijian{
	width: 90%;
	display: flex;
	justify-content: space-between;
	padding: 20upx 20upx;
}
.tuijian a{
	width: 100%;
	height: 100%;
}
.tuijian-img{
	width: 100upx;
	height: 100upx;
}
.all-tuijian{
	text-align: center;
	font-size: 24upx;
}
.banner{
	width: 100%;
}
.banner image{
	width: 100%;
	height: 200px;
}
.tab{
	width: 100%;
	line-height: 40px;
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	position: sticky;
	/* #ifdef MP-WEIXIN*/
	top: 0px;
	/* #endif */
	/* #ifdef H5*/
	top:0px;
	/* #endif */
	z-index: 2000;
	
}
.tab-item{
	flex: 1;
	text-align: center;
}
.tab-border{
	border-bottom: 2px solid #DD4A68;
}
.data-class{
	width: 49%;
}
.data-class image{
	width: 100%;
}
.all-list{
	width: 96%;
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	margin: 10px auto;
	padding-bottom: 40px;
}
.listfont{
	font-size: 30upx;
	color: #666;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 30px;
}
.list-view{
	display: flex;
	height: 30px;
	line-height: 30px;
	justify-content: space-around;
	font-size: 24upx;
	overflow: hidden;
}
.newp{
	color:#DD4A68 ;
}
.view-fab{
	width: 50px;
	height: 50px;
	background-color: #ffffff;
	border-radius: 50%;
	box-shadow: 0 0 10px #333;
	z-index: 2000;
	position:fixed;
	/* #ifdef MP-WEIXIN*/
	bottom: 20px;
	/* #endif */
	bottom: 60px;
	right: 20px;
	opacity: 0.8;
}
.view-fab image{
	width: 100%;
	height: 100%;
}
</style>
